<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="button" value="响应结果" onclick="sendAjax()">
    <input type="button" value="响应结果" onclick="sendAjax2()">

    <script>
        /* 
            请求状态正常-获取请求响应数据
            xhr.responseText返回响应的文本数据
                通过事件load监听XMLHttpRequest请求成功时间，并排出对应的执行函数，也可以使用onload代替
                结果1：如果请求未成功或者尚未发送，则返回""
                结果2：如果请求成功，但在响应之前进行调用，则返回""
                结果3：如果请求成功，并且在响应完成后调用，将返回服务器响应数据 
                */
        function sendAjax() {
            let xhr = new XMLHttpRequest();
            console.log("结果1:", xhr.responseText);
            xhr.open("get", "/user");
            xhr.onload = function () {
                console.log("结果3:", xhr.responseText);
            };
            xhr.send();
            console.log("结果2:", xhr.responseText);
        }


        /*
            请求状态异常-监控异常状态
                1.异常1:网络错误(请求无法正常发送)
                    事件error：在请求过程中，若发送Network error(请求根本无法完成发生)，则会触发此事件，也可以使用onerror替代
                    注意：只有发生了网络层级别的异常才会触发此事件，对于应用层级别的异常不会触发onerror事件
                2.异常2：应用层逻辑异常  
          */
          function sendAjax2() {
            let xhr = new XMLHttpRequest();
            console.log(xhr);
            xhr.open("get", "/user");
            // xhr.open("get", "/serviceError");//500
            xhr.onload = function () {
                console.log( xhr.responseText);
            };
            xhr.onerror=function(){
                console.log("=====>请求未发送成功");
                alert("网络错误，请开网重试");
            };
            xhr.send();
            
        }

    </script>




</body>

</html>